<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  <script type="text/javascript" src="static/jtopo/0.4.8.js"></script>
  <script>
    const draw = () => {
      const canvas = document.getElementById('canvas')
      const box = new JTopo.Scene();
      const stage = new JTopo.Stage(canvas);
      stage.add(box)

      var nodeA = null;
      (function () {
        var node0 = new JTopo.CircleNode('vm_0');
        node0.setLocation(34, 181);
        box.add(node0);

        var node1 = new JTopo.CircleNode('vm_1');
        node1.setLocation(244, 191);
        box.add(node1);
        nodeA = node1;

        var node2 = new JTopo.CircleNode('vm_2');
        node2.setLocation(281, 94);
        box.add(node2);

        var group = new JTopo.Container("vmgroup1");
        group.add(node0);
        group.add(node1);
        group.add(node2);

        box.add(group);
      })();

      (function () {
        var node0 = new JTopo.CircleNode('vm_0');
        node0.setLocation(11, 393);
        box.add(node0);

        var node1 = new JTopo.CircleNode('vm_1');
        node1.setLocation(213, 292);
        box.add(node1);

        var node2 = new JTopo.TextNode('vm_2');
        node2.setLocation(285, 345);
        box.add(node2);

        var group = new JTopo.Container("vmgroup2");
        group.add(node0);
        group.add(node1);
        group.add(node2);

        box.add(new JTopo.CurveLink(nodeA, node1));

        box.add(group);
      })();
    }
    document.addEventListener('DOMContentLoaded', function() {
      draw()
    });
  </script>
</head>

<body>
  <canvas id="canvas" width="800" height="500"></canvas>
</body>

</html>